import React from "react"
import Modal from 'antd/lib/modal/Modal'
import moment from 'moment'
import {connect} from 'umi'
import {Form,Input,DatePicker,TimePicker,Select} from "antd"
import { useEffect } from "react"
const {Option}=Select
const EditForm=(props:any)=> {
    const {showEdit,isEdit}=props
    const [form]=Form.useForm()
    const {dispatch,model}=props
    const onCancel=()=>{
        dispatch({
            type: "itineraryInfo/save",
            payload: {
                showEdit: false,
                isEdit:false
            }
        })
    }
    const {e_loc_id,s_loc_id,flight_id,price,capacity}=model
    const new_form={e_loc_id,s_loc_id,flight_id,price,capacity}
    useEffect(()=>{
        form.setFieldsValue(new_form)
    },[new_form])
    // useEffect(()=>{
    //     form.setFieldsValue(model)
    // },[model])
    const onFinish=()=>{
        form.validateFields().then((values)=>{
            var {s_time,e_time}=values
            var values={...values,s_time:s_time.format('YYYY-MM-DD HH:mm:ss'),e_time:e_time.format('YYYY-MM-DD HH:mm:ss')}
            console.log('values:',values)
            if(isEdit){
                dispatch({
                    type:"itineraryInfo/update",
                    payload:{
                        id:model.id,
                        data:{...values}
                    }
                })
            }
            else{
                console.log('不在编辑')
                dispatch({
                    type:"itineraryInfo/insert",
                    payload:{
                        data:{...values}
                    }
                },function(err:any){
                    if(err) throw err
                })
            }
        })
    }
    const handleChange=(value:any)=>{
        console.log(`选择了${value}`)
    }
    const handleTime=(value:any,dateString:any)=>{
        console.log(value,dateString)
    }
    const disabledDate = (current:any) => {
        return current < moment().startOf('day');
      }
    return (
    <Modal visible={showEdit} getContainer={false} title="编辑" onCancel={onCancel} onOk={onFinish}>
        <Form form={form} onFinish={onFinish}>
            <Form.Item label="航班号" name="flight_id" rules={[{required:true,message:"请输入航班号"}]}>    
                <Input placeholder="请输入航班号"/>  
            </Form.Item>
            <Form.Item label="出发地点" name="s_loc_id" rules={[{required:true,message:"请选择出发地"}]}> 
                <Select onChange={handleChange} placeholder="请选择出发地">
                    <Option value="1">武汉</Option>
                    <Option value="2">杭州</Option>
                </Select>
            </Form.Item>
            <Form.Item label="到达地点" name="e_loc_id" rules={[{required:true,message:"请选择到达地"}]}> 
                <Select onChange={handleChange} placeholder="请选择到达地">
                    <Option value="1">武汉</Option>
                    <Option value="2">杭州</Option>
                </Select>  
            </Form.Item>
            <Form.Item label="起飞时间"　name="s_time" 
            rules={[{required:true,message:"请选择起飞时间"}]} > 
                <DatePicker showTime defaultValue={moment()} disabledDate={disabledDate} format="YYYY-MM-DD HH:mm" onChange={handleTime }/>
            </Form.Item>
        </Form>

    </Modal>
    )
}
const mapStateToProps=(state:any)=>({
    model:state.itineraryInfo.current,
    showEdit:state.itineraryInfo.showEdit,
    isEdit:state.itineraryInfo.isEdit
})
export default connect(mapStateToProps)(EditForm)
